<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>操作当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="closeWindow()">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>商品图片</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>总价</li>
            <li>操作</li>
        </ul>
        <ul id="ul1">
            <li><img src="images/dog.jpg"></li>
            <li>我和狗狗活下来了</li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minusNums(this)"><input type="text"  name="amount" value="1"><input type="button" name="plus" value="+" onclick="plusNums(this)"></li>
            <li>¥21.90</li>
            <li><p  onclick="collection()">移入收藏</p><p onclick="del('ul1')">删除</p></li>
        </ul>
        <ul id="ul2">
            <li><img src="images/mai.jpg"></li>
            <li>灰霾来了怎么办</li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minusNums(this)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plusNums(this)"></li>
            <li>¥24.00</li>
            <li><p  onclick="collection()">移入收藏</p><p onclick="del('ul2')">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">商品总计：<span></span></li>
            <li><span onclick="tiaozhuan()">结 算</span></li>
        </ol>
    </div>
</div>

<script>
	window.onload=function (){
		spzj();
	}
	//增加数量
	function plusNums(t){
		// t.previousSibling.value++;	
		let sl=t.previousSibling.value;
		sl++;
		t.previousSibling.value=sl;
		var price=t.parentNode.previousElementSibling.lastElementChild.value*sl;
		t.parentNode.nextElementSibling.innerHTML="￥"+price.toFixed(2);
		spzj();
	}
	//减少数量
	function minusNums(t){
		
		let sl=t.nextSibling.value;
		sl--;
		if(sl<0){
			alert("不允许为负数");
			return;
			// t.nextSibling.value=0;
			// t.parentNode.nextElementSibling.innerHTML="￥"+"0.00";
		}
		t.nextSibling.value=sl;
		spzj();
		var price=t.parentNode.previousElementSibling.lastElementChild.value*sl;
		t.parentNode.nextElementSibling.innerHTML="￥"+price.toFixed(2);
		
		
		
	}
	function closeWindow(){
		// alert(55);
		window.close();
	}
	function collection(){
		alert("收藏成功！")
	}
	function del(str){
		
		if(confirm("确认删除？")){
			var a=document.getElementById(str);
			a.parentNode.removeChild(a);
			spzj();
		}else{
			alert("取消删除");
		}
	}
	function tiaozhuan(){
		window.location="https://www.baidu.com";
	}
	

	//商品总计
	function spzj(){
		var ol=document.getElementById("totalPrice");
		let all=ol.parentElement.parentElement.children;
		var zongji=0;
		for(let i=1;i<all.length-1;i++){
			zongji+=(all[i].children[2].children[0].value*all[i].children[3].children[1].value);
		}
	 document.getElementById("totalPrice").children[0].innerHTML= zongji.toFixed(2)+"元";
	}
</script> 
</body>
</html>